<template lang="pug">
  .m-coorMap(ref="coorMap")
</template>
<script>

import echarts from 'echarts'
var geoCoordMap = {
  'center': [431, 201],
  '上海': [54, 100],
  '东莞': [69, 155],
  '东营': [107, 221],
  '中山': [138, 120],
  '临汾': [176, 56],
  '临沂': [186, 267],
  '丹东': [196, 174],
  '丽水': [222, 86],
  '乌鲁木齐': [269, 56],
  '佛山': [276, 137],
  '保定': [291, 228],
  '兰州': [303, 386],
  '包头': [346, 119],
  '北京': [367, 181],
  '北海': [383, 300],
  '南京': [460, 148],
  '南宁': [471, 246],
  '南昌': [475, 385],
  '南通': [547, 119],
  '厦门': [553, 53],
  '台州': [555, 460],
  '合肥': [587, 23],
  '呼和浩特': [601, 330],
  '咸阳': [641, 90],
  '哈尔滨': [650, 165],
  '唐山': [659, 266],
  '嘉兴': [696, 56],
  '大同': [743, 362]

}

var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'

let ret = [] // 点
let coords = []
for (let item in geoCoordMap) {
  let obj = {}
  obj.name = item
  obj.value = geoCoordMap[item]
  ret.push(obj)

  const fromCoord = geoCoordMap.center
  const toCoord = geoCoordMap[item]
  coords.push([{
    coord: fromCoord
  }, {
    coord: toCoord
  }])
}

var series = []

series.push(
  {
    name: ' Top10',
    type: 'lines',
    zlevel: 1,
    effect: {
      show: true,
      period: 6,
      trailLength: 0.7,
      color: '#00e5ff',
      symbolSize: 2
    },
    lineStyle: {
      normal: {
        color: 'red',
        width: 0,
        curveness: 0.2
      }
    },
    data: coords
  },
  {
    name: ' Top10',
    type: 'lines',
    zlevel: 2,
    effect: {
      show: false,
      period: 6,
      trailLength: 0,
      symbol: planePath,
      symbolSize: 15
    },
    lineStyle: {
      normal: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#fff' // 0% 处的颜色
          }, {
            offset: 1, color: '#059cba' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        width: 1,
        opacity: 0.4,
        curveness: 0.2
      }
    },
    data: coords
  }
  // {
  //   name: ' Top10',
  //   type: 'effectScatter',
  //   coordinateSystem: 'geo',
  //   zlevel: 2,
  //   rippleEffect: {
  //     brushType: 'stroke'
  //   },
  //   symbolSize: 5,
  //   itemStyle: {
  //     normal: {
  //       color: '#00e5ff'
  //     }
  //   },
  //   data: ret
  // }
)

let option = {

  geo: {
    map: 'china',
    show: false,

    roam: true

  },
  series: series
}

function init () {
  let el = this.$refs.coorMap
  echarts.init(el).setOption(option)
}
function mounted () {
  this.init()
}
export default {
  name: 'coordMap',
  mounted,
  methods: {
    init
  }
}
</script>

<style lang="stylus" scoped>
  .m-coorMap
    position absolute
    left 8px
    width 810px
    height 512px
    background url('img/map.png') no-repeat

</style>
